AngularJS Examples

AngularJS Example

<div ng-app="">

<p>Name: <input type="text" ng-model="name"></p>
<p>You wrote: {{ name }}</p>

</div>
Try it Yourself »

Basics

My first AngularJS Directives
My first AngularJS Directives (with valid HTML5)
My first AngularJS Expression
A simple AngularJS Expression, using a variable
My first AngularJS Controller

Basic AngularJS Explained

Expressions

A simple Expression
Expression without ng-app
Expression with Numbers
Using ng-bind with Numbers
Expression with Strings
Using ng-bind with Strings
Expression with Objects
Using ng-bind with Objects
Expression with Arrays
Using ng-bind with Arrays

Expressions Explained

Modules

AngularJS Controller
Modules and controllers in files
When to load AngularJS

Modules Explained

Directives

AngularJS Directives
The ng-model Directive
The ng-repeat Directive (with Arrays)
The ng-repeat Directive (with Objects)
Make a new Directive
Using the new directive as element
Using the new directive as attribute
Using the new directive as a class
Using the new directive as a comment
A Directive with restrictions

Directives Explained

Models

AngularJS Model
A Model with two-way binding
A Model with validation
A form and its current validation status
Set a CSS class when a field is invalid

Models Explained

Controllers

AngularJS Controller
Controller Properties
Controller Functions
Controller in JavaScript File I
Controller in JavaScript File II

Controllers Explained

Scopes

AngularJS Scope
The scope is in sync
Different Scopes
The RootScope

Scopes Explained

Filters

Expression Filter uppercase
Expression Filter lowercase
Expression Filter currency
Directive Filter orderBy
Input Filters

Filters Explained

XMLHttpRequest

Reading a static JSON file

XMLHttpRequest Explained

Tables

Displaying a table (simple)
Displaying a table with CSS
Displaying a table with an orderBy filter
Displaying a table with an uppercase filter
Displaying a table with an index
Displaying a table with even and odd

Tables Explained

AngularJS SQL

Reading from a MySQL database
Reading from a SQL Server database

Angular SQL Explained

Fetching Data From a PHP Server Running MySQL
Fetching Data From an ASP.NET Server Running SQL

Server Code Examples
Cross-Site HTTP Requests, to allow cross-site access, add following line:
header("Access-Control-Allow-Origin: *");
1. Server Code PHP and MySQL
2. Server Code PHP and MS Access
3. Server Code ASP.NET, VB and MS Access
4. Server Code ASP.NET, Razor C# and SQL Lite

HTML DOM

The ng-disabled Directive
The ng-show Directive
The ng-show, based on a condition
The ng-hide Directive

HTML DOM Explained

Events

The ng-click Directive
The ng-hide Directive
The ng-show Directive

HTML Events Explained

ng-blur
ng-change
ng-click
ng-copy
ng-cut
ng-dblclick
ng-focus
ng-keydown
ng-keypress
ng-keyup
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-mouseup
ng-paste

Forms

AngularJS Forms
AngularJS Validation

Angular Forms Explained

API

AngularJS angular.lowercase()
AngularJS angular.uppercase()
AngularJS angular.isString()
AngularJS angular.isNumber()

API Explained

W3.CSS

AngularJS With W3.CSS

W3.CSS Explained

Includes

AngularJS Include HTML
Include a table containting AngularJS code
Include a file from a different domain

AngularJS Includes

Animations

AngularJS Animation
Including the animation library as a dependency
Animation using CSS3 Transitions
Animation using CSS3 Animations

AngularJS Animations

Applications

AngularJS Note Application
AngularJS ToDo Application

AngularJS Applications




angularjs calculator example
angularjs webapplication
building angularjs app tutorial
building web applications with angularjs